<template>
	<div class="big-container" style="padding: 20px 0;">
		<div v-if="this.$route.query.type == 2" class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item
						:to="{path:this.$route.query.routePath,query:{id:this.$route.query.routeId}}">{{this.$route.query.name}}</el-breadcrumb-item>
					<el-breadcrumb-item
						v-if="this.$route.query.name!=this.$route.query.twoName">{{this.$route.query.twoName}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<div class="detail-title">{{info.position}}：{{info.name}}</div>
				<div class="center-layout"><img style="width: 140px;height: 200px;" :src="info.avatarUrl" /></div>
				<div class="detail-content" v-html="info.intro"></div>
			</div>
		</div>
		<div v-else class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item
						:to="{path:this.$route.query.routePath,query:{id:this.$route.query.routeId}}">{{this.$route.query.name}}</el-breadcrumb-item>
					<el-breadcrumb-item
						v-if="this.$route.query.name!=this.$route.query.twoName">{{this.$route.query.twoName}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<div class="detail-title">{{info.title}}</div>
				<div class="detail-date">
					发布时间：{{info.releaseTime}}&ensp;&ensp;&ensp;&ensp;文章来源：{{info.releaseUnit?info.releaseUnit:'——'}}
				</div>
				<div class="detail-content" v-html="info.content"></div>
				<div v-if="info.fileNames" class="file-area">
					<div class="file-name">附件：</div>
					<div>
						<div style="margin-bottom: 6px;" v-for="(item,index) in info.fileNames.split(',')" :key="index">
							 <el-link style="font-size: 16px;"  :href="item" target="_blank" type="primary">附件{{index+1}}</el-link>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getInfo,
		getNewsInfo,
		getMemberInfo
	} from "@/api/index";
	export default {
		data() {
			return {
				info: {}
			}
		},
		created() {
			if (this.$route.query.type == 1) {
				getNewsInfo(this.$route.query.id).then(res => {
					this.info = res.data
				})
			} else if (this.$route.query.type == 2) {
				getMemberInfo(this.$route.query.id).then(res => {
					this.info = res.data
				})
			} else {
				getInfo(this.$route.query.id).then(res => {
					this.info = res.data
				})
			}
		},
		mounted() {
			window.scrollTo(0, 0);
		},
		methods: {

		}
	}
</script>

<style scoped>
	.file-area {		
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.file-name{
		text-indent: 2em;
		font-size: 16px;
		font-weight:bold;
		margin-top: 3px;
	}

	::v-deep .el-icon-location {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 22px !important;
		margin-right: 6px;
	}

	::v-deep .el-icon-arrow-right {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}

	/* 不被选中时的颜色 */
	.el-breadcrumb ::v-deep .el-breadcrumb__inner {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}
	/* .detail-content {
		word-wrap: break-word;
		overflow-wrap: break-word;
		white-space: pre-wrap;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	} */
	
	::v-deep .detail-content * {
		max-width: 100% !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		/* white-space: pre-wrap !important; */
		box-sizing: border-box !important;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
	
	::v-deep .detail-content img {
		max-width: 100% !important;
		height: auto !important;
		display: block;
		margin: 10px auto;
		object-fit: contain;
	}
	
	/* 处理表格溢出 */
	::v-deep .detail-content table {
		width: 100% !important;
		border-collapse: collapse;
		overflow-x: auto;
		display: block;
	}
</style>